<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SearchHub - 智能搜索引擎</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .search-shadow {
                box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
            }
        }
    </style>
</head>
<body class="font-inter bg-white min-h-screen flex flex-col items-center justify-center p-4">
    <!-- Logo区域 -->
    <div class="text-center mb-8">
        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-transparent bg-gradient-to-r from-primary to-blue-400 bg-clip-text">
            SearchHub
        </h1>
        <p class="text-gray-500 mt-2 text-sm">探索无限可能</p>
    </div>

    <!-- 搜索区域（搜索框 + 右侧按钮） -->
    <div class="w-full max-w-2xl relative">
        <input 
            type="text" 
            id="searchInput"
            placeholder="搜索任何内容..." 
            class="w-full pl-10 pr-40 py-4 rounded-full border border-gray-200 search-shadow focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all duration-200"
        >
        <button 
            id="searchButton" 
            class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-primary/90 transition-colors duration-200"
        >
            搜索
        </button>
        <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
            <i class="fa fa-search text-lg"></i>
        </div>
    </div>

    <script>
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');

        // 搜索框聚焦/失焦动画
        searchInput.addEventListener('focus', () => {
            searchInput.parentElement.classList.add('scale-[1.01]');
            searchInput.parentElement.style.transition = 'transform 0.2s ease-in-out';
        });
        searchInput.addEventListener('blur', () => {
            searchInput.parentElement.classList.remove('scale-[1.01]');
        });

        // 核心修改：在新标签页打开结果页，保留原页面
        function openSearchResults() {
            const query = searchInput.value.trim();
            if (query) {
                // 用window.open()在新标签页打开结果页
                window.open(`search-results.html?query=${encodeURIComponent(query)}`, '_blank');
                // 可选：搜索后清空输入框（根据需求决定是否保留）
                // searchInput.value = '';
            }
        }

        // 绑定搜索按钮点击事件
        searchButton.addEventListener('click', openSearchResults);

        // 绑定回车键事件
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                openSearchResults();
            }
        });
    </script>
</body>
</html>
    